<template>
  <div class="main">
    <Row style="text-align: right">
      <Col>
        <Dropdown>
          <template #overlay>
            <div style="text-align: center">
              <div @click="selectIndex('1')" class="hoverDrop">概览</div>
              <div @click="selectIndex('2')" class="hoverDrop">详细</div>
            </div>
          </template>
          <a class="ant-dropdown-link" style="color: #b30000">
            展示模式<Icon name="down" style="vertical-align: middle" />
          </a>
        </Dropdown>
      </Col>
    </Row>
    <Row :gutter="16" v-show="visibleOne">
      <Col :span="6">
        <Card style="width: 100%" @click="onClick">
          <div>
            <div>
              <div class="title">解决方案</div>
              <div>
                <strong>1150</strong>
              </div>
              <div>
                <div>厂商数量：<strong>20</strong></div>
                <div>产品数量：<strong>88</strong></div>
                <div>解决方案数量：<strong>22</strong></div>
              </div>
            </div>
            <div></div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="width: 100%" @click="onClick">
          <div>
            <div>
              <div class="title">评测用例</div>
              <div>
                <strong>1234</strong>
              </div>
              <div>
                <div>用例数量：<strong>20</strong></div>
                <div>适用场景：<strong>88</strong></div>
                <div>解决方案数量：<strong>22</strong></div>
              </div>
            </div>
            <div></div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="width: 100%" @click="onClick">
          <div>
            <div>
              <div class="title">实验室底座</div>
              <div>
                <strong>1150</strong>
              </div>
              <div>
                <div>服务器：<strong>20</strong></div>
                <div>虚拟机：<strong>88</strong></div>
                <div>容器：<strong>22</strong></div>
              </div>
            </div>
            <div></div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="width: 100%" @click="onClick">
          <div>
            <div>
              <div class="title">去O项目</div>
              <div>
                <strong>1234</strong>
              </div>
              <div>
                <div>已完成项目：<strong>20</strong></div>
                <div>进行中项目：<strong>88</strong></div>
                <div style="height: 24px"></div>
              </div>
            </div>
            <div></div>
          </div>
        </Card>
      </Col>
    </Row>
    <!-- 详细页面 -->
    <div v-show="visibleTwo">
      <Row :gutter="16" style="display: flex;">
        <Col :span="14">
          <Tabs defaultActiveKey="2" type="card">
            <TabsPane key="1" tab="进行中">
              <div style="padding: 12px">
               <List :dataSource="data1">
                  <template #renderItem="item">
                    <ListItem>
                      <ListItemMeta>
                        <template #title>
                          <span>{{ item }}</span>
                        </template>
                        <template #description>
                          <div>
                            项目编号：UCP00784913
                            <span
                              style="display: inline-block; margin-left: 55px"
                            >
                              2020/02/02
                            </span>
                          </div>
                        </template>
                      </ListItemMeta>
                      <div>
                        <span
                          style="
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #faad14;
                            margin-right: 5px;
                          "
                        />
                        测试迁移阶段
                      </div>
                    </ListItem>
                  </template>
                </List>
              </div>
            </TabsPane>
            <TabsPane key="2" tab="已完成">
              <div style="padding: 12px">
                <List :dataSource="data1">
                  <template #renderItem="item">
                    <ListItem>
                      <ListItemMeta>
                        <template #title>
                          <span>{{ item }}</span>
                        </template>
                        <template #description>
                          <div>
                            项目编号：UCP00784913
                            <span
                              style="display: inline-block; margin-left: 55px"
                            >
                              2020/02/02
                            </span>
                          </div>
                        </template>
                      </ListItemMeta>
                      <div>
                        <span
                          style="
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #faad14;
                            margin-right: 5px;
                          "
                        />
                        测试迁移阶段
                      </div>
                    </ListItem>
                  </template>
                </List>
              </div>
            </TabsPane>
          </Tabs>
        </Col>
        <Col :span="10" class="resource">
          <Card style="width: 100%" @click="onClick" title="资源">
            <Row>
              <Col class="detailResource" :span="12">
                <div class="number">2000</div>
                <div class="text">数据库产品</div>
              </Col>
              <Col class="detailResource" :span="12">
                <div class="number">2000</div>
                <div class="text">数据库厂家</div>
              </Col>
            </Row>
            <Row>
              <Col class="detailResource clearBorder" :span="12">
                <div class="number">2000</div>
                <div class="text">解决方案</div>
              </Col>
              <Col class="detailResource clearBorder" :span="12">
                <div class="number">2000</div>
                <div class="text">硬件设备</div>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col>
          <Card style="width: 100%" @click="onClick" title="自研支撑工具">
            <Row class="toolRow">
              <Col>
                <Steps :active="2">
                  <Step title="应用评估" />
                  <Step title="迁移测试" />
                  <Step title="迁移实施" />
                  <Step title="数据验证" />
                  <Step title="功能验证" />
                </Steps>
              </Col>
            </Row>
            <Row class="toolRow">
              <Col>
                <Steps :active="2">
                  <Step title="应用评估" />
                  <Step title="迁移测试" />
                  <Step title="迁移实施" />
                  <Step title="数据验证" />
                  <Step title="功能验证" />
                </Steps>
              </Col>
            </Row>
            <Row class="toolRow">
              <Col>
                <Steps :active="2">
                  <Step title="应用评估" />
                  <Step title="迁移测试" />
                  <Step title="迁移实施" />
                  <Step title="数据验证" />
                  <Step title="功能验证" />
                </Steps>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibleOne: true,
      visibleTwo: false,
      data1: [
        "OA国产化替代-1",
        "OA国产化替代-2",
        "OA国产化替代-3",
        "OA国产化替代-4",
      ],
    };
  },
  methods: {
    selectIndex(val) {
      if (val == "1") {
        this.visibleOne = true;
        this.visibleTwo = false;
      } else if (val == "2") {
        this.visibleOne = false;
        this.visibleTwo = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  height: 100%;
  margin: 0;
  width: calc(100vw - 220px);
}
.title {
  font-weight: bold;
  font-size: 1rem;
}
.hoverDrop:hover {
  cursor: pointer;
  color: #b30000;
}
.uni-tabs-pane {
  background: #fff;
}
.detailResource {
  padding: 20px 0 20px 20px;
  height: 100%;
  .number {
    font-size: 1.2rem;
    font-weight: bold;
  }
  .text {
    font-size: 1rem;
  }
  &:nth-child(1) {
    border-right: 2px solid #99a9bf;
  }
  .clearBorder {
    border: 0px !important;
  }
}
.toolRow {
  padding-bottom: 20px;
}
::v-deep .resource .uni-card {
  height: 100%;
  .uni-card-content {
  height: calc(100% - 36px);
    display: flex;
    flex-direction: column;
      .uni-row {
    flex: 1;
    &:nth-child(1) {
      border-bottom: 2px solid #99a9bf;
}
    }
}

  }
</style>
